<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>团队购物清单</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>团队购物清单</h1>
        <div class="team-members">
            <div class="member active" data-member="all">全部</div>
            <div class="member" data-member="member1">成员A</div>
            <div class="member" data-member="member2">成员B</div>
            <div class="member" data-member="member3">成员C</div>
        </div>
        
        <div class="add-item">
            <input type="text" id="newItem" placeholder="输入物品名称...">
            <button id="addButton">添加物品</button>
            <select id="memberSelect">
                <option value="member1">成员A</option>
                <option value="member2">成员B</option>
                <option value="member3">成员C</option>
            </select>
            <select id="categorySelect">
                <option value="fruit">水果</option>
                <option value="vegetable">蔬菜</option>
                <option value="daily">日用品</option>
                <option value="other">其他</option>
            </select>
        </div>

        <div class="filter-controls">
            <div class="filter active" data-category="all">全部</div>
            <div class="filter" data-category="fruit">水果</div>
            <div class="filter" data-category="vegetable">蔬菜</div>
            <div class="filter" data-category="daily">日用品</div>
            <div class="filter" data-category="other">其他</div>
        </div>
        
        <div class="shopping-list">
            <div class="list-header">
                <div>物品名称</div>
                <div>添加人</div>
                <div>状态</div>
                <div>操作</div>
            </div>
            <div id="itemsList"></div>
        </div>
        
        <div class="instructions">
            <h3>团队协作说明：</h3>
            <ol>
                <li>每位成员克隆仓库到本地</li>
                <li>创建自己的分支：<code>git checkout -b [你的名字]</code></li>
                <li>添加你负责购买的物品</li>
                <li>提交并推送到你的分支</li>
                <li>创建Pull Request合并到主分支</li>
                <li>解决合并冲突（如有）</li>
            </ol>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>